<template>
  <div class="print-container">
    <div class="print-header">
      <div class="print-title">资产借出</div>
      <button type="button" class="print-btn el-button--primary el-button--mini" @click="handlePrint">
        <span>打印</span>
      </button>
    </div>
    <div class="printBody" id="print-container">
      <div id="printForm">
        <table class="print-table documentInfo">
          <tr>
            <td class="columnTitle">
              <div>单据信息</div>
              <div class="underline"></div>
            </td>
          </tr>
          <tr>
            <td>
              <table class="print-table list">
                <tr>
                  <td class="label">单据编号</td>
                  <td class="value">ZCCL2024041100001</td>
                </tr>
                <tr>
                  <td class="label">借用人</td>
                  <td class="value">何昊阳</td>
                </tr>
                <tr>
                  <td class="label">借出时间</td>
                  <td class="value">2024-07-30</td>
                </tr>
                <tr>
                  <td class="label">备注</td>
                  <td class="value">-</td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <table class="print-table assetList">
          <tr>
            <td class="columnTitle">
              <div>资产列表</div>
              <div class="underline"></div>
            </td>
          </tr>
          <tr>
            <td>
              <table class="print-table vxe-table vxe-table--render-default">
                <thead>
                  <tr>
                    <th>资产名称</th>
                    <th>型号</th>
                    <th>数量</th>
                    <th>单价</th>
                    <th>金额</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="asset in assets" :key="asset.name">
                    <td>{{ asset.name }}</td>
                    <td>{{ asset.model }}</td>
                    <td>{{ asset.quantity }}</td>
                    <td>{{ asset.unitPrice }}</td>
                    <td>{{ asset.amount }}</td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>

  import print from 'print-js'
export default {
  setup() {
    const openFlag = ref(false);
    const assets = ref([
      { name: '电脑', model: '联想小新', quantity: '1', unitPrice: '5000', amount: '5000' },
      { name: '显示器', model: '戴尔U2419H', quantity: '1', unitPrice: '2000', amount: '2000' },
    ]);

    function open() {
  openFlag.value = true;
}
function handlePrint() {

  print({
    printable: 'print-container',
    type: 'html',
    scanStyles: true,
    targetStyles: ['*']
  });

}
    return {
      openFlag,
      open,
      handlePrint,
      assets,
    };
  },
};
</script>

<style scoped>
.print-container {
  padding: 20px;
}

.print-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.print-title {
  font-size: 24px;
  font-weight: bold;
}

.print-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007BFF;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.3s;
}

.print-btn:hover {
  background-color: #0056b3;
}

@media print {
  .print-btn {
    display: none;
  }
}

.print-content {
  page-break-after: always;
}

.print-document-info,
.print-asset-list {
  page-break-after: always;
}

.print-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.print-table th,
.print-table td {
  border: 1px solid #dddddd;
  padding: 8px;
  text-align: left;
}

.print-table th {
  background-color: #f2f2f2;
  font-weight: bold;
  color: #333333;
}

.print-table td {
  color: #666666;
}
</style>